{% load static %}
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票结果 - {{ question.question_text }}</title>
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 悬浮框架 -->
    <div class="floating-frame">
        <h1><i class="fas fa-vote-yea"></i> 投票系统</h1>
        <div class="stats-container">
            <div class="stat-item">
                <i class="fas fa-poll icon"></i>
                <span>当前主题: {{ question.question_text|truncatechars:20 }}</span>
            </div>
            <div class="stat-item">
                <i class="fas fa-users icon"></i>
                <span>总投票数: {{ question.total_votes }}</span>
            </div>
            <div class="stat-item">
                <i class="fas fa-check-circle icon"></i>
                <span>选项: {{ question.choice_set.count }}</span>
            </div>
        </div>
    </div>

    <header>
        <h1>投票结果</h1>
        <a href="{% url 'polls:index' %}" class="btn"><i class="fas fa-arrow-left"></i> 返回首页</a>
    </header>

    <main>
        <h2><i class="fas fa-chart-bar"></i> {{ question.question_text }}</h2>
        
        <div class="results-container">
            <h3><i class="fas fa-poll-h"></i> 投票结果：</h3>
            <ul>
            {% for choice in question.choice_set.all %}
                <li>
                    <strong>{{ choice.choice_text }}</strong>
                    <div class="vote-count">
                        {{ choice.votes }} 票 ({{ choice.percentage|floatformat:1 }}%)
                    </div>
                    <div class="progress-container">
                        <div class="progress-fill" style="width: {% if choice.percentage %}{{ choice.percentage }}{% else %}0{% endif %}%"></div>
                        <div class="percentage-label "></div>
                    </div>
                </li>
            {% endfor %}
            </ul>
            
            <div class="total-votes">
                <h3><i class="fas fa-users"></i> 总计：</h3>
                <p>总投票数: <strong>{{ question.total_votes }}</strong> 票</p>
            </div>
        </div>
        
        <div class="action-buttons">
            <a href="{% url 'polls:detail' question.id %}" class="btn">
                <i class="fas fa-redo"></i> 重新投票
            </a>
            <a href="{% url 'polls:index' %}" class="btn">
                <i class="fas fa-home"></i> 返回投票首页
            </a>
        </div>
    </main>

    <footer>
        <p>© 2023 投票系统 | 使用Django构建</p>
    </footer>
</body>
</html>